<!-- 左边图标跳转 页面 -->
<template>
	<view class="">
		<view class="issueInvoiceContianer">
			<view class="flex-start-center">
				<view class="">
					发票类型
				</view>
				<view class="issueInvoiceBtn flex margin-left_38rpx">
					<text>电子普通发票</text>
				</view>
			</view>

			<view class="margin-top_60rpx flex-start-center">
				<view class="">
					抬头类型
				</view>
				<!-- <view class="unit flex margin-left_38rpx">
					单位
				</view>
				<view class="person flex margin-left_30rpx">
					个人
				</view> -->

				<!-- :class="list.length <= 0 ? 'v-p-top2' : 'v-p-top'" -->
				<view class="HeadType flex ">
					<view :class="tabIndex==index?'unit flex margin-left_38rpx ':'person flex margin-left_30rpx'"
						v-for="(item,index) in HeadTypeList" :key="index" @click="tabSwitch(index)">
						{{item}}
					</view>
				</view>
			</view>

			<view class="margin-top_60rpx flex-start-center">
				<view class="">
					抬头名称
				</view>
				<view class=" flex margin-left_38rpx">
					<input class="uni-input" v-model="form.name" placeholder="请输入抬头名称" />
				</view>
			</view>
			<block v-if="tabIndex==1">
				<view class="margin-top_60rpx flex-start-center">
					<view class="">
						单位税号
					</view>
					<view class=" flex margin-left_38rpx">
						<input class="uni-input" v-model="form.tfn" placeholder="请输入单位税号 " />
					</view>
				</view>
				<view class="margin-top_60rpx flex-start-center">
					<view class="">
						注册地址
					</view>
					<view class=" flex margin-left_38rpx">
						<input class="uni-input" v-model="form.address" placeholder="请输入注册地址 " />
					</view>
				</view>
				<view class="margin-top_60rpx flex-start-center">
					<view class="">
						注册电话
					</view>
					<view class=" flex margin-left_38rpx">
						<input type="number" class="uni-input" v-model="form.telphone" placeholder="请输入注册电话 " />
					</view>
				</view>
				<view class="margin-top_60rpx flex-start-center">
					<view class="">
						开户银行
					</view>
					<view class=" flex margin-left_38rpx">
						<input class="uni-input" v-model="form.bank_name" placeholder="请输入开户银行" />
					</view>
				</view>
				<view class="margin-top_60rpx flex-start-center">
					<view class="">
						银行账号
					</view>
					<view class=" flex margin-left_38rpx">
						<input type="number" class="uni-input" v-model="form.bank_no" placeholder="请输入银行账号" />
					</view>
				</view>

			</block>


		</view>
		<view style="height: 30rpx;"></view>
		<view class="issueInvoiceContianer">
			<view class=" flex-start-center">
				<view class="">
					手机号码
				</view>
				<view class=" flex margin-left_38rpx">
					<input type="number" class="uni-input" v-model="form.mobile" placeholder="请输入手机号码" />
				</view>
			</view>
		</view>

		<view class="fixed">



			<view class="flex applyBtn" @click="applyInvoiceBtn()">
				申请发票
			</view>

		</view>
	</view>
</template>

<script>
	import antiThrottling from '@/utils/antiThrottling.js';
	export default {
		data() {
			return {
				HeadTypeList: [
					 '个人','单位'
				],

				tabIndex: 0,
				form: {
					// 订单id
					order_id: '',
					// 1-普通商品 2-拼团商品 3-秒杀商品 4-砍价商品
					type: '',


					invoice_type: 1,
					// 抬头名称
					name: '',
					// 单位税号
					tfn: '',
					// 地址
					address: '',
					// 注册电话
					telphone: '',
					// 开户银行
					bank_name: '',
					// 银行账号
					bank_no: '',
					mobile: ''
				},
				type: '',
				order_id: ''

			};
		},
		onLoad(options) {
			console.log(options)
			this.form.order_id = options.orderId
			this.form.type = options.type
			this.type = options.type
			this.order_id = options.orderId
		},
		onShow() {

			antiThrottling.releaseKey('submit');
		},

		methods: {
			tabSwitch(index) {
				this.tabIndex = index
				this.form.invoice_type = index + 1
				if (this.tabIndex == 0) {
					this.form = {
						// 订单id
						order_id: '',
						// 1-普通商品 2-拼团商品 3-秒杀商品 4-砍价商品
						type: this.type,


						invoice_type: 1,
						// 抬头名称
						name: '',
						// 单位税号
						tfn: '',
						// 地址
						address: '',
						// 注册电话
						telphone: '',
						// 开户银行
						bank_name: '',
						// 银行账号
						bank_no: '',
						mobile: ''
					}
				} else {
					this.form = {
						// 订单id
						order_id: '',
						// 1-普通商品 2-拼团商品 3-秒杀商品 4-砍价商品
						type: this.type,


						invoice_type: 2,
						// 抬头名称
						name: '',
						// 单位税号
						tfn: '',
						// 地址
						address: '',
						// 注册电话
						telphone: '',
						// 开户银行
						bank_name: '',
						// 银行账号
						bank_no: '',
						mobile: ''
					}
				}
			},
			applyInvoiceBtn() {
				if (this.tabIndex==0) {
					if (!this.form.name) {
						this.$sun.toast('请填写抬头名称')
						return
					} else if (!(/^1[3456789]\d{9}$/.test(this.form.mobile))) {
						this.$sun.toast('请填写正确手机号码')
						return
					} else {
						console.log(this.form)

						antiThrottling.uniDoFunc({
							// 键名
							key: 'submit',
							success: async () => {
								//锁定
								antiThrottling.lockKey('submit');
								this.applyInvoiceFn()
							}
						});
					}
				} else {
					if (!this.form.name) {
						this.$sun.toast('请填写抬头名称')
						return
					} else if (!this.form.tfn) {
						this.$sun.toast('请填写单位税号')
						return
					} else if (!this.form.address) {
						this.$sun.toast('请填写地址')
						return
					} else if (!(/^1[3456789]\d{9}$/.test(this.form.telphone))) {
						this.$sun.toast('请填写正确注册电话')
						return
					} else if (!this.form.bank_name) {
						this.$sun.toast('请填写开户银行')
						return
					} else if (!this.form.bank_no) {
						this.$sun.toast('请填写开户账号')
						return
					} else if (!(/^1[3456789]\d{9}$/.test(this.form.mobile))) {
						this.$sun.toast('请填写正确手机号码')
						return
					} else {
						console.log(this.form)

						antiThrottling.uniDoFunc({
							// 键名
							key: 'submit',
							success: async () => {
								//锁定
								antiThrottling.lockKey('submit');
								this.applyInvoiceFn()
								
							}
						});
					}
				}
			},
			async applyInvoiceFn() {
				
				const result = await this.$http.get({
					url: this.$api.orderInvoice,
					data: {
						...this.form,
						uid: uni.getStorageSync('uid'),
						order_id: this.order_id
					}
				});
				if (result.errno == 0) {
					antiThrottling.releaseKey('submit');
					this.$sun.toast(result.message);

					setTimeout(() => {
						this.$sun.navBack()
					}, 500)
				} else {
					this.$sun.toast(result.message);
				}
			},

		}
	};
</script>

<style lang="less">
	.applyBtn {
		width: 680rpx;
		height: 96rpx;
		border-radius: 128rpx;
		color: #fff;
		margin: 40rpx;
		background: linear-gradient(90.00deg, rgb(223, 50, 34) 2.059%, rgb(235, 87, 47) 100%);
	}

	.issueInvoiceContianer {
		padding: 50rpx 30rpx;
		width: 750rpx;

		background: rgb(255, 255, 255);

		.issueInvoiceBtn {
			width: 188rpx;
			height: 58rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(255, 46, 46);
			border-radius: 110rpx;
			color: #E12222;
			background: rgb(248, 237, 235);
		}

		.HeadType {
			.unit {
				border: 2rpx solid rgb(255, 46, 46);
				box-sizing: border-box;
				width: 108rpx;
				height: 60rpx;
				border-radius: 110rpx;
				color: #E12222;
				background: rgb(242, 242, 242);
			}

			.person {
				box-sizing: border-box;
				width: 108rpx;
				height: 60rpx;
				border-radius: 110rpx;
				color: #E12222;
				background: rgb(242, 242, 242);
			}
		}
	}
</style>